<html>

<head>
    <title>修改密码</title>
    <link rel="stylesheet" href="../css/element.css" />
    <script src="../js/jquery.min.js"></script>
    <!-- 先引入 Vue -->
    <script src="../js/vue.js"></script>
    <script src="../js/a.js"></script>
    <script src="../lib/c.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/element.ui.js"></script>
    <script src="../js/crypto-js.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.14.1/dist/av-live-query-min.js"></script>
    <script type="text/javascript" src="js/DigitalRain.js"></script>
    <!--单击显示文字-->
    <script type="text/javascript" src="js/click_show_text.js"></script>

</head>

<body>
    <!-- 数字雨 -->
    <canvas id="canvas" width="1440" height="900"></canvas>
    <div id="app">
        <div id="root_group">

            <!-- -------------------------重置密码--------------------------------- -->

            <div id="mian_view">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                    <div class="title">{{title}}</div>
                    <el-form-item label="新密码" prop="pwd">
                        <el-input type="password" v-model="form.pwd" autocomplete="off" :disabled="disabled">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="pwd1">
                        <el-input type="password" v-model="form.pwd1" autocomplete="off" :disabled="disabled">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="commit('form')" :disabled="disabled">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- ------------------------修改密码--------------------------------- -->
        </div>
    </div>

    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            methods: {
                getQuery() {
                    let query = getQueryString('data')
                    // console.log(getQueryString('data'))
                    // console.log('---------------------解密后')
                    juage(getDAes(query))
                },
                commit(formName) {

                    this.$refs[formName].validate((valid) => {
                        if (valid) {

                            var todo = AV.Object.createWithoutData($.Encryption.CloudTable.UserMaster, $.Encryption.user.bean.objectId);
                            todo.set('pwdChangeCode', getPwdKey());
                            todo.set('pwd', vue._data.form.pwd)
                            todo.save();
                            this.$message({
                                type: 'success',
                                message: '修改密码成功'
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                }
            },
            data: function () {
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.form.pwd) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    disabled: true,
                    title: '修改密码',
                    rules: {
                        pwd: [
                            { required: true, message: '密码不能为空', trigger: 'blur' },

                        ],
                        pwd1: [
                            { validator: validatePass2, trigger: 'blur' },

                        ],
                    },
                    form: {
                        pwd: '',
                        pwd1: '',
                    },

                    dialogVisible: true
                }
            },
            created: function () {
                init()
                this.getQuery()

            }
        })
        function init() {
            AV.init({
                appId: $.Encryption.Cloud.APP_ID,
                appKey: $.Encryption.Cloud.APP_KEY
            });
        }
        function juage(value) {
            var query = new AV.Query($.Encryption.CloudTable.UserMaster)
            query.equalTo('pwdChangeCode', value);
            query.find().then(function (result) {
                var data = JSON.parse(JSON.stringify(result));
                let count = 0;
                if (data != null && data.length > 0) {
                    count = 1;
                    $.Encryption.user.bean = data[0];
                }
                if (count < 1) {
                    err();
                } else {
                    vue._data.disabled = false;
                }

            }, function (arg) {
                err();
            });
        }
        function err() {
            vue._data.disabled = true;
            vue._data.title = '无效的链接';
            vue.$message.error("页面已失效");

        }  
    </script>
</body>
<style>
    canvas {
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        z-index: -1;
    }

    #root_group {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #mian_view {
        width: 30%;
        padding: 50px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 10px 10px 5px #888888;
        border-radius: 10px;
        min-width: 500px;
    }

    .title {
        text-align: center;
        margin-bottom: 50px;
    }
</style>

</html>